<template>
    <div id="app">
        <div class="backbtn" @click="back" v-show="$route.path!=='/recommend'">
            <i class="el-icon-arrow-left"></i>
        </div>
        <!--在排行榜详情页和歌手详情页隐藏头部-->
        <div class="header" v-show="hideheader()">
            <m-header></m-header>
            <tab></tab>
        </div>
        <!--<div :class="['content',listshow==true?'noscroll':'']" ref="content">-->
            <transition>
                <router-view class="transition-box"></router-view>
            </transition>
        <footer>
            <!--传递方法给子组件，获取播放列表状态true/false-->
            <player></player>
        </footer>
    </div>
</template>

<script>
  import MHeader from './components/m-header/m-header.vue'
  import Tab from './components/tab/tab.vue'
  import Player from './components/player/player.vue'

  export default {
    name: 'App',
    data() {
      return {
        listshow: false,
        scrolltop: 0
      }
    },

    methods: {
      //  判断header是否需要隐藏
      hideheader() {
        return this.$route.path !== `/user`  && this.$route.path !== `/rank/${this.$route.params.id}` && this.$route.path !== `/singer/singerinfo/${this.$route.params.id}`
      },
      //  后退
      back() {
        this.$router.go(-1)
      }
    },
    components: {
      MHeader,
      Tab,
      Player
    }
  }
</script>

<style >
    #app {
        /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
        /*-webkit-font-smoothing: antialiased;*/
        /*-moz-osx-font-smoothing: grayscale;*/
        text-align: center;
        width: 100%;
        overflow: hidden;
        /*color: #2c3e50;*/
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        background-color: #000;
        z-index: 1000;
        width: 100%;
        /*width: 100vw;*/

        height: 98px;
    }

    .light {
        color: white;
    }

    .divstyle {
        width: 100%;
        height: 500px;
        background-color: white;
    }

    footer {
        background-color: #000;
        position: fixed;
        width: 100%;
        height: 4rem;
        bottom: 0;
        text-align: left;
        /*padding-left: 0.5rem;*/
        display: flex;
        flex-direction: column;
        z-index: 9000;

    }

    .transition-box {
        padding-top: 98px;
        padding-bottom: 4rem;
        /*position: fixed;*/
    }
    .backbtn {
        position: fixed;
        height: 3rem;
        width: 4rem;
        z-index: 2000;
        line-height: 3rem;
    }

    .el-icon-arrow-left {
        transform: scale(2, 2) translateX(-0.3rem);
    }

    /*动画*/
    .v-enter {
        opacity: 0;
        transform: translateX(100%);
        /*position: absolute;*/
    }

    .v-leave-to {
        opacity: 0;
        transform: translateX(-100%);
        position: absolute;
    }

    .v-enter-active, .v-leave-active {

        transition: all 0.5s ease;
    }
</style>
